<template>
<!-- //页面 -->
<div class="mianPage">
  <el-dialog
  :visible.sync="pdfDisplay"
  top="0vh"
  width="68%"
  :before-close="handleClose">
  <div v-if="pdfShow">
    <pdf
    :src="evUrl+currentItem.bookUrl"
    :page="currentPage"
    @num-pages="pageCount=$event"
    @page-loaded="currentPage=$event"
    class="pdf-css"
    >
    </pdf>
    {{currentPage}} / {{pageCount}}
    <el-button size="mini" type="primary" @click="prePage(currentPage)"><</el-button>
    <el-button size="mini" type="primary" @click="nextPage(currentPage)">></el-button>
    <el-input size="mini" style="width:58px;padding:0;margin-left:10px" v-model="input"></el-input>页
    <el-button size="mini" type="primary" @click="goPage">跳转</el-button>
  </div>
  </el-dialog>

<div class="pageHeader">
    <!-- //图书添加 -->
  <el-dialog
  title="添加图书"
  :visible.sync="formDisplay"
  width="50%">
  <div>
    <el-form :model="upform" :rules="rules" ref="ruleForm" label-width="80px">
  <el-form-item label="图书名字" prop="bookName">
    <el-input v-model="upform.bookName"></el-input>
  </el-form-item>
  <el-form-item label="图书作者" prop="author">
    <el-input v-model="upform.author"></el-input>
  </el-form-item>
  <el-form-item label="图书描述" prop="desc">
    <el-input type="text" v-model="upform.desc"></el-input>
  </el-form-item>
    </el-form>
  </div>
  <div>
    <!-- 图书封面 -->
<el-upload
  ref="upBookPic"
  class="upload-demo"
  :action="evUrl+'zj/addBookInfo'"
  :data="upform"
  :auto-upload="false"
  :on-success="picSuccess"
  :on-remove="removeFileList"
  :on-change="getFileList"
  :file-list="fileList"
  limit:1
  list-type="picture">
  <el-button v-if="fFlag" size="small" type="primary">上传封面</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<!-- 图书pdf文件 -->
<el-upload
        ref="upBookPdf"
        :action="evUrl+'zj/addBookPdf'"
        accept=".pdf"
        :data="upPdfInfo"
        :on-success="pdfSuccess"
        :on-change="getPdfFileList"
        :on-remove="removePdfList"
        :auto-upload="false"
        :file-list="pdfFileList">
           <el-button v-if="pFlag" size="mini">
            选择pdf文件
           </el-button>
           <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
        </el-upload>
  </div>
  <el-button type="primary" size="mini" @click="makeUp">提交</el-button>
  </el-dialog>
  <div class="header" style="height:38px">
    <div class="inner-header" style="position:fixed;width:100%">
      <div class="content-area" style="display:flex;justify-content:space-between;height:38px;align-items:center;padding:0 28px;background:orange;color:#fff">
        <div class-l><div><el-button style="border:1px solid #fff" v-if="false" type="primary" size="mini" @click="btnOne">添加图书</el-button></div></div>
        <div class-r>
          <div class="searchArea" style="display:flex;">
            <el-input style="margin-right:8px;" size="mini" v-model="searchBook" placeholder="请输入书名">
              <el-button @click="searchShow" v-if="btnStatus" style="padding:3px;margin-top:2px;background:transparent;border:0;font-size:18px" slot="suffix" size="mini" icon="el-icon-circle-close"></el-button>
              </el-input>
            <el-button style="border:1px solid #fff" type="primary" icon="el-icon-search" size="mini" @click="searchBookName"></el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  <div class="pageBody" style="display:flex;flex-wrap:wrap;justify-content:start;background: #FCF5E5;height:518px;padding:0 28px">
    <div v-for="item in bookInfo" :key="item.bookId">
      <el-card class="box-card" style="width:220px;height:258px;margin-right:8px;margin-top:3px">
        <div style="width:130;height:140px">
          <img style="width:100%;height:100%" :src="evUrl+item.bookPic"/>
        </div>
        <div style="border-bottom:1px solid gray;border-top:1px solid gray">
          <div>{{item.bookName}}</div>
          <div style="font-size:13px;color:purple">{{item.bookAuthor}}</div>
          <div style="font-size:13px;color:gray">{{item.bookDesc}}</div>
        </div>
        <div>
          <el-button style="margin-top:5px" size="mini" type="primary" @click="readBook(item)">阅读</el-button>
          <el-button
          v-if="false"
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="deleteOpt(item)"></el-button>
        </div>
      </el-card>
    </div>
  </div>
  <div class="footer" style="position:fixed;right:0;bottom:0">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total1">
    </el-pagination>
  </div>
</div>

</template>
<script>
import { getBookInfo, deleteXs } from '../api/info'
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  data () {
    return {
      currentPage1: 1,
      total1: 11,
      // 搜索按钮状态
      btnStatus: false,
      searchBook: '',
      evUrl: this.$evUrl,
      pdfShow: false,
      input: '',
      currentId: 1,
      bookInfo: [],
      currentItem: {},
      fFlag: true,
      pFlag: true,
      currentPage: 1,
      pageCount: 1,
      fileList: [],
      pdfFileList: [],
      formDisplay: false,
      pdfDisplay: false,
      upform: {
        bookName: '',
        author: '',
        desc: ''
      },
      upPdfInfo: {
        id: ''
      },
      rules: {
        bookName: [
          { required: true, message: '请输入图书名称', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入图书作者', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入图书描述', trigger: 'blur' }
        ]

      }
    }
  },
  methods: {
    handleCurrentChange (val) {
      // console.log(val)
      this.currentPage1 = val
      this.getBookInfo()
    },
    // 清空搜索框
    searchShow () {
      this.searchBook = ''
    },
    // 搜索
    searchBookName () {
      this.currentPage1 = 1
      this.getBookInfo()
    },
    // 跳转页码
    goPage () {
      if ((parseInt(this.input) > 0) && (parseInt(this.input) <= this.pageCount)) {
        this.currentPage = parseInt(this.input)
        this.input = ''
      } else {
        return false
      }
    },
    // 删除图书
    deleteOpt (item) {
      deleteXs(item).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success(data.message)
          return this.getBookInfo()
        }
      })
    },
    // 关闭遮罩层
    handleClose () {
      this.currentPage = 1
      this.pdfShow = false
      // this.pageCount = 1
      this.pdfDisplay = false
    },
    // 上一页
    prePage (page) {
      if (page > 1) {
        this.currentPage--
      }
    },
    // 下一页
    nextPage (page) {
      if (page < this.pageCount) {
        this.currentPage++
      }
    },
    // 读文件
    readBook (item) {
      this.currentItem = item
      this.pdfShow = true
      // console.log(this.currentItem)
      this.pdfDisplay = true
    },
    // 获取图书信息
    getBookInfo () {
      getBookInfo({ serchVal: this.searchBook, currentPage: this.currentPage1, info: this.searchBook }).then(({ data }) => {
        // console.log(data)
        this.bookInfo = data.arrVal
        this.total1 = data.total
      })
    },
    // 打开添加图书
    btnOne () {
      this.pdfShow = true
      this.formDisplay = true
    },
    // 获取图片列表
    getFileList (file, fileList) {
      this.fileList = fileList
      if (fileList.length === 1) {
        this.fFlag = false
      }
    },
    // 获取文件列表
    getPdfFileList (file, fileList) {
      this.pdfFileList = fileList
      if (fileList.length === 1) {
        this.pFlag = false
      }
    },
    // 移除图片列表
    removeFileList (file, fileList) {
      this.fileList = fileList
      if (fileList.length === 0) {
        this.fFlag = true
      }
    },
    // 移除pdf文件
    removePdfList (file, fileList) {
      this.pdfFileList = fileList
      if (fileList.length === 0) {
        this.pFlag = true
      }
    },
    // 上传文件
    makeUp () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!((this.pdfFileList.length === 1) && (this.fileList.length === 1))) {
            return this.$message.info('请选择文件')
          } else {
            this.$refs.upBookPic.submit()
          }
        } else {
          return this.$message.info('请填写正确表单')
        }
      })
    },
    // 图片上传成功
    picSuccess (response) {
      // console.log(response)
      this.upPdfInfo.id = response.id
      // pdf文件上传
      this.$refs.upBookPdf.submit()
    },
    // pdf文件上传成功
    pdfSuccess (response) {
      if (response.status === 200) {
        this.$refs.upBookPdf.clearFiles()
        this.$refs.upBookPic.clearFiles()
        this.$refs.ruleForm.resetFields()
        this.fFlag = true
        this.pFlag = true
        this.formDisplay = false
        return this.getBookInfo()
      }
    }
  },
  watch: {
    searchBook (newVal, oldVal) {
      if (newVal.length > 0) {
        this.btnStatus = true
      }
      if (newVal === '') {
        this.btnStatus = false
        this.currentPage1 = 1
        this.getBookInfo()
      }
    }
  },
  mounted () {
    if (window.localStorage.getItem('token')) {
      this.currentId = JSON.parse(localStorage.getItem('userInfo')).role
    }
    this.getBookInfo()
  }
}
</script>
<style scoped lang="less">
.mianPage{
  background: #FCF5E5;
  height:90vh;
  .pdf-css{
  width:100%;
  height:80%;
}
.searchArea{
  /deep/.el-input__inner {
         background: transparent;
         border:1px solid #fff;
         color:#fff;
     }
  /deep/.el-input__inner::placeholder{
    color:#fff;
  }

}

}

</style>
